import React, { useState } from 'react';
import { Card, Button, Typography } from 'antd';
import { TeamOutlined } from '@ant-design/icons';
import JoinTeamModal from '@/components/JoinTeamModal';
import styles from '../index.module.css';

const { Title, Text } = Typography;

interface NoTeamComponentProps {
  onJoinSuccess: () => void;
}

/**
 * 没有团队时的加入团队组件
 */
const NoTeamComponent: React.FC<NoTeamComponentProps> = ({ onJoinSuccess }) => {
  const [joinModalVisible, setJoinModalVisible] = useState(false);

  const handleJoinTeamSuccess = () => {
    setJoinModalVisible(false);
    onJoinSuccess();
  };

  return (
    <>
      <Card className={styles.noTeamCard}>
        <div className={styles.noTeamContent}>
          <div className={styles.noTeamHeader}>
            <TeamOutlined className={styles.noTeamIcon} />
            <Title level={3} className={styles.noTeamTitle}>
              您还没有加入任何团队
            </Title>
            <Text type="secondary" className={styles.noTeamDescription}>
              加入团队后即可查看和练习团队题单
            </Text>
          </div>
          <div className={styles.noTeamAction}>
            <Button
              type="primary"
              size="large"
              icon={<TeamOutlined />}
              onClick={() => setJoinModalVisible(true)}
            >
              加入团队
            </Button>
          </div>
        </div>
      </Card>

      <JoinTeamModal
        visible={joinModalVisible}
        onCancel={() => setJoinModalVisible(false)}
        onSuccess={handleJoinTeamSuccess}
      />
    </>
  );
};

export default NoTeamComponent;
